<div class="form-group schema-form-simplecolor {{form.htmlClass}}" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false }">
    <label class="control-label {{form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
    <div class="input-group dropdown">
        <div class="input-group-addon">
            <i style="display:block; width: 16px; height: 16px" ng-style="{'background-color': $$value$$}"></i>
        </div>
        <div class="dropdown-menu" style="padding: 0">
            <div class="colorpanel">
                <div class="col-xs-4">
                    <button class="btn" style="background-color: #337ab7" ng-click="$$value$$='#337ab7'">&nbsp;</button>
                </div>
                <div class="col-xs-4">
                    <button class="btn" style="background-color: #5cb85c" ng-click="$$value$$='#5cb85c'">&nbsp;</button>
                </div>
                <div class="col-xs-4">
                    <button class="btn" style="background-color: #5bc0de" ng-click="$$value$$='#5bc0de'">&nbsp;</button>
                </div>
                <div class="col-xs-4">
                    <button class="btn" style="background-color: #f0ad4e" ng-click="$$value$$='#f0ad4e'">&nbsp;</button>
                </div>
                <div class="col-xs-4">
                    <button class="btn" style="background-color: #d9534f" ng-click="$$value$$='#d9534f'">&nbsp;</button>
                </div>
                <div class="col-xs-4">
                    <button class="btn" style="background-color: #777777" ng-click="$$value$$='#777777'">&nbsp;</button>
                </div>
            </div>
        </div>
        <input data-toggle="dropdown" schema-validate="form" sf-field-model ng-model="$$value$$" ng-show="form.key" type="text" step="any"
            sf-changed="form" placeholder="{{form.placeholder}}" class="form-control {{form.fieldHtmlClass}}" id="{{form.key.slice(-1)[0]}}"
            ng-disabled="form.readonly" ng-readonly="true" name="{{form.key.slice(-1)[0]}}" aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
    </div>
    <span ng-if="form.feedback !== false" class="form-control-feedback" ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"
        aria-hidden="true"></span>
    <span ng-if="hasError() || hasSuccess()" id="{{form.key.slice(-1)[0] + 'Status'}}" class="sr-only">{{ hasSuccess() ? '(success)' : '(error)' }}</span>
    <div class="help-block" sf-message="form.description"></div>
</div>